<template>
	<view :style="{height: height ? height : '100%'}">
		<scroll-view scroll-y="true"
			:style="{height: height ? height : '100%'}"
			:refresher-enabled="supportPullRefresh"
			:refresher-triggered="isLoading"
			@refresherrefresh="reset"
			@scrolltolower="loadMore"
		>
			<slot />
			<view v-if="dataList.length == 0 && !isLoading" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
				<img :src="empty" alt="暂无数据" style="width: 160px; height: 160px;">
				<span style="margin-top: 16px; padding: 0 60px; color: #969799;  font-size: 14px;  line-height: 20px">暂无数据</span>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import empty from '@/static/empty-image-default.png'
	export default {
		name: 'customList',
		props: {
			isLoading: {
				type: Boolean,
				default: false
			},
			finished: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				default: () => []
			},
			rowKey: {
				type: String
			},
			supportSelect: {
				type: Boolean,
				default: false
			},
			supportPullRefresh: {
				type: Boolean,
				default: true
			},
			height: {
				type: String
			}
		},
		data() {
			return {
				refreshing: false,
				pullDisabled: false,
				pageNum: 1,
				empty:empty
			}
		},
		methods: {
			reset(arg) {
        if (this.isLoading) return
				this.pageNum = 1;
				this.refreshing = true;
				this.onLoadData();
				this.refreshing = false;
			},
			onRefresh() {
				this.refreshing = true
				this.onLoadData();
				this.refreshing = false;
			},
			loadMore() {
				if (this.isLoading || this.finished) return;
				this.onLoadData();
			},
			onLoadData() {
				if (this.refreshing) this.pageNum = 1;
				this.$emit('load', this.pageNum++);
			}
		}
	}
</script>

<style>
</style>
